<template>
  <!-- 个人信息页面展示 -->
  <div class="container">
  <!-- 已登录账户头部区域 -->
  <div class="user-container" v-if="$store.state.userDataServe">
    <div class="userHeader-box">
      <!-- 头像及昵称 -->
      <div class="title-box">
          <van-image
            round
            fit="cover"
            :src="userInfo.photo"
          />
          <span>{{userInfo.name}}</span>
      </div>
      <!-- 编辑设置 -->
      <van-button class="set-btn" round>编辑资料</van-button>
    </div>
    <!-- /已登录账户头部区域 -->
    <!-- 宫格头条关注粉丝获赞 -->
    <van-grid class="focus-infor" :border="false">
      <van-grid-item>
        <template slot="text" class="forcus-grid">
          <span>{{userInfo.art_count}}</span>
          <span>头条</span>
        </template>
      </van-grid-item>
      <van-grid-item>
        <template slot="text" class="forcus-grid">
          <span>{{userInfo.follow_count}}</span>
          <span>关注</span>
        </template>
      </van-grid-item>
      <van-grid-item>
        <template slot="text" class="forcus-grid">
          <span>{{userInfo.fans_count}}</span>
          <span>粉丝</span>
        </template>
      </van-grid-item>
      <van-grid-item>
        <template slot="text" class="forcus-grid">
          <span>{{userInfo.like_count}}</span>
          <span>获赞</span>
        </template>
      </van-grid-item>
    </van-grid>
    <!-- /宫格头条关注粉丝获赞 -->
  </div>
  <!-- 未登录头部区域 -->
  <div class="tour-container" @click="$router.push('/login')" v-else>
      <div class="tour-pic"></div>
      <span>登录 / 注册</span>
  </div>
  <!-- 收藏历史宫格 -->
  <van-grid clickable :column-num="2" class="history-grid">
    <van-grid-item >
      <i slot="icon" class="newsfont newsshoucang"></i>
      <span slot="text">收藏</span>
    </van-grid-item>
    <van-grid-item>
      <i slot="icon" class="newsfont newslishi"></i>
      <span slot="text">历史</span>
    </van-grid-item>
  </van-grid>
  <!-- Cell单元格 -->
  <van-cell-group>
    <van-cell title="消息通知" clickable>
      <van-icon slot="right-icon" name="arrow"></van-icon>
    </van-cell>
  </van-cell-group>
  <van-cell-group>
    <van-cell title="小智同学" clickable>
      <van-icon slot="right-icon" name="arrow"></van-icon>
    </van-cell>
  </van-cell-group>
 <!-- 退出登录 -->
  <van-cell
    title="退出登录"
    v-if="$store.state.userDataServe"
    class="logout-btn"
    @click="userLogout"></van-cell>

  </div>
</template>

<script>
import { getUserInfo } from '@/api/users.js'
export default {
  name: 'my',
  created () {
    if (this.$store.state.userDataServe) { this.loadUserInfo() }
  },
  data () {
    return {
      userInfo: {}
    }
  },
  methods: {
    // 用户退出登录
    userLogout () {
      this.$dialog.confirm({
        title: '退出登录提示',
        message: '您确定要退出当前登录状态吗?'
      })
        .then(() => {
          this.$store.commit('setUser', null)
          this.$toast.success('您已退出登录!')
        })
        .catch(() => {
          this.$toast('已取消退出登录操作!')
        })
    },
    // 定义获取用户数据方法
    async loadUserInfo () {
      try {
        const { data: res } = await getUserInfo()
        this.userInfo = res.data
        this.$store.commit('setUserInfo', res.data)
      } catch (err) {
        if (err.response === 400) return this.$toast.fail('数据错误,请重新登录!')
        this.$toast.fail('服务器异常,请稍后重试')
      }
    }
  }
}
</script>

<style lang="less" scoped>
/* 已登录用户头部样式 */
.user-container, .tour-container {
  height: 400px;
  padding-top: 65px;
  min-width: 100%;
  background: url('~@/assets/banner.png');
  background-size: cover;
  .userHeader-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    height: 220px;
    min-width: 100%;
    .title-box {
      display: flex;
      align-items: center;
      .van-image {
      width: 132px;
      height: 132px;
      border: 2px solid #fff;
      }
      span {
        margin-left: 22px;
        font-size: 29px;
        color: #ffffff;
      }
    }
    .set-btn {
      padding: 0;
      color: #666666;
      width: 120px;
      height: 33px;
      font-size: 20px;
    }
  }
  .focus-infor {
    .grid-item-content-background-color {
      background-color: #3296fa;
    }
    .van-grid-item {
      color: #ffffff;
      span:nth-child(1) {
        font-size: 36px;
      }
      span:nth-child(2) {
        margin-top: 10px;
        font-size: 23px;
      }
    }
  /deep/.van-grid-item__content {
      padding-top: 0;
      background-color: #409DFA
    }
  }
}
/* 未登录用户头部样式*/
.tour-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  color: #fff;
  .tour-pic {
    width: 132px;
    height: 132px;
    margin-bottom: 15px;
    background: url('../../assets/mobile.png') no-repeat;
    background-size: cover;
  }
}
/* 收藏 历史宫格样式 */
.history-grid {
  margin-bottom: 10px;
  .newsfont {
    font-size: 45px;
    color: #eb5253;
  }
  .newslishi {
    color: #ff9d1d;
  }
  /deep/ .van-grid-item__content {
    padding: 10px 0;
  }
  span {
    font-size: 28px;
  }
}
/* Ceel导航条 */
/deep/ .van-cell {
  height: 105px;
  font-size: 30px;
  padding: 0 25px;
  line-height: 105px;
  background-color: #fff;
  color: #333333;
  .van-icon {
    line-height: 105px;
  }
}
/* 退出登录 */
.logout-btn {
  margin-top: 10px;
  font-size: 30px;
  color: #d86262;
  .van-cell__title {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
